<template>
    <van-tabbar
        class="tabber"
        fixed
        placeholder>
        <div
            class="tabber-container"
            :style="{ ...containerStyle() }">
            <van-button
                class="button"
                v-for="(btn, index) in buttons"
                :type="isPrimaryBtn(btn)"
                :style="{ ...buttonStyle() }"

                :key="index"
                @click="btn.callback"
            >
                {{ $st(btn.text) }}
            </van-button>
        </div>
    </van-tabbar>
</template>

<script lang="js">
import { ref } from 'vue';
export default {
    props: {
        placeholder: {
            type: Boolean,
            default: true
        },
        height: {
            type: Number,
            default: 50
        },
        buttons: {
            type: Array,
            default () {
                return [
                    {
                        isPrimary: true,
                        text: 'btn01',
                        callback: () => {

                        }
                    },
                    {
                        isPrimary: false,
                        text: 'btn31',
                        callback: () => {

                        }
                    }
                ];
            }
        }
    },
    setup (props, context) {
        const holder = ref(null);
        const baseStyle = {
            height: props.height + 'px'

        };

        const containerStyle = () => {
            return { ...baseStyle };
        };

        const buttonStyle = () => {
            return {
                // border: '1px solid #eee',
                // borderRadius: props.height / 2 + 'px',
                flexBasis: (100 / props.buttons.length) + '%'
            };
        };
        const isPrimaryBtn = (btn) => {
            if (btn.isPrimary) {
                return 'primary';
            } else { return 'default'; }
        };

        return {
            holder,
            containerStyle,
            isPrimaryBtn,
            buttonStyle

        };
    }
};
</script>

<style lang="scss" scoped>
.tabber {
  padding-left: 15px;
}
.tabber-container {

//   box-sizing: border-box;
  width: 100%;
  height: 53px;
  display: flex;
  align-items: center;
  margin-left: 15px;
  margin-right: 15px;
  justify-content: flex-end;

//   padding-top: 6px;
//   padding-bottom: 6px;
  .button {
      height: 40px;
      font-size: 14px;
      padding-left: 5px;
      padding-right: 5px;
      margin-right: 5px;
      border-radius: 4px;
      .van-button__content{
    //    max-width: 50px;
      }
  }
  .button:last-child{
      margin-right: 0px;
  }
  :last-child {
    margin-right: 0px;
  }
}
</style>
